import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import dayjs from 'dayjs';
import { create7Days } from '../../createDateObjects';
import styles from './index.module.less';

const LessTwoMonthGrid = (props) => {
  const { className, date, dateList } = props;
  return (
    <div className={classnames(styles.root, className)}>
      {date &&
        create7Days(date).map(({ day, classNames }) => {
          const has = dateList?.find((d) => {
            const dd = dayjs(d);
            return dd.isSame(day, 'day');
          });
          return (
            <div
              key={dayjs(day).valueOf()}
              className={classnames(styles.griditem, has && styles.selectedDay, styles[classNames])}
            >
              {day.format('MM.DD')}
            </div>
          );
        })}
    </div>
  );
};

LessTwoMonthGrid.defaultProps = {
  className: null,
  date: null,
  dateList: null,
};

LessTwoMonthGrid.propTypes = {
  className: PropTypes.any,
  date: PropTypes.any,
  dateList: PropTypes.any,
};

export default LessTwoMonthGrid;
